<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprit</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet/less" type="text/css" href="./less/index.less">
    <link rel="stylesheet" type="text/css" href="./wow/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="./css/reset.css">
    <link rel="stylesheet" href="./icn/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <div class="head">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                         </button>
                            <a class="navbar-brand logo wow fadeInLeft" href="#">Spirit8</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="wow fadeInRight" data-wow-delay="100ms"><a href="#">HOME</a></li>
                                <li><a href="#" class="wow fadeInRight" data-wow-delay="200ms">ABOUT</a></li>
                                <li><a href="#" class="wow fadeInRight" data-wow-delay="300ms">SERVICES</a></li>
                                <li><a href="#" class="wow fadeInRight" data-wow-delay="400ms">PORTFOLIO</a></li>
                                <li><a href="#" class="wow fadeInRight" data-wow-delay="500ms">TESTIMONIALS</a></li>
                                <li><a href="#" class="wow fadeInRight" data-wow-delay="600ms">CONTACT</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="benner">
        <div class="benner_top  wow lightSpeedIn" data-wow-delay=".3s">
            <span>WELCOME ON</span>
            <span>Spirit8</span>

        </div>
        <div class="font wow fadeInUp" data-wow-delay=".5s">We are a digtal agecy with years of experience and with extrordinary people</div>
        <div class="benner_boot  wow fadeInUp" data-wow-delay=".7s">↓</div>
    </div>

    <!-- 主要内容 -->
    <div class="main ">
        <div class="container ">
            <div class="row ">
                <div class="col-lg-6 main_img wow fadeInUp " data-wow-delay="400ms">
                    <img src="./img/about-background.png " alt=" ">
                </div>
                <div class="col-lg-6 main_right ">
                    <p class="main_top ">About us</p>
                    <div class="main_center wow fadeInUp">
                        <span>SOME</span>
                        <span>WORDS</span>
                        <span>about us</span>
                        <p>
                            We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.
                        </p>
                    </div>

                    <div class="list ">
                        <ul>
                            <li class="wow fadeInUp" data-wow-delay="200ms">Mission -we deliver uniqueness and quality</li>
                            <li class="wow fadeInUp" data-wow-delay="300ms">Skills -Delivering fast and excellent results</li>
                            <li class="wow fadeInUp" data-wow-delay="400ms">Clients -Satisfied clients thanks to our experience</li>
                        </ul>

                    </div>
                    <!-- 按钮 -->
                    <div class="but wow fadeInUp" data-wow-delay="500ms">
                        <span class="iconfont ">
                            &#xe60e;
                        </span>
                        <span>Browse our work</span>
                    </div>
                </div>
            </div>
        </div>


        <!-- 菜单 -->
        <div class="meue wow fadeInUp" data-wow-delay="500ms">
            <div class="title ">
                <span>MEET</span>
                <span>OUR</span>
                <span>TEAM</span>
            </div>
            <div class="title_border "></div>
            <div class="container ">
                <div class="row ">
                    <div>
                        <div class="meue_box col-lg-3 col-xs-6 ">
                            <div class="box wow fadeInUp" data-wow-delay="500ms">
                                <img src="./img/cover.png " alt=" ">
                            </div>
                            <div class="box_font wow fadeInUp" data-wow-delay="500ms">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                                <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                            </div>
                        </div>
                        <div class="meue_box col-lg-3 col-xs-6 wow fadeInUp" data-wow-delay="700ms">
                            <div class="box ">
                                <img src="./img/cover.png " alt=" ">
                            </div>
                            <div class="box_font">
                                <p>Van Damme</p>
                                <p>No English</p>
                                <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                            </div>
                        </div>
                        <div class="meue_box col-lg-3 col-xs-6 wow fadeInUp" data-wow-delay="800ms">
                            <div class="box wow fadeInUp" data-wow-delay="800ms">
                                <img src="./img/cover.png " alt=" ">
                            </div>
                            <div class="box_font wow fadeInUp" data-wow-delay="800ms">
                                <p>Sylvester Stallone</p>
                                <p>knife designer</p>
                                <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                            </div>

                        </div>
                        <div class="meue_box col-lg-3 col-xs-6 ">
                            <div class="box wow fadeInUp" data-wow-delay="900ms">
                                <img src="./img/cover.png " alt=" ">
                            </div>
                            <div class="box_font wow fadeInUp" data-wow-delay="900ms">
                                <p>Jet Li</p>
                                <p>knife designer</p>
                                <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div class="meue_bottom wow fadeInUp" data-wow-delay="500ms">
                <li></li>
                <li></li>
                <li></li>
            </div>
        </div>


        <!-- 主体内容2 -->
        <div class="center ">
            <div class="center-tittle wow fadeInUp" data-wow-delay="500ms"">
                <p>take a look at</p>
                <p>&nbsp;our services</p>

            </div>


            <div class="center-font wow fadeInUp" data-wow-delay="200ms">
                <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum " (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p>
                <p>treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.. ", comes from a line in section 1.10.32.</p>
            </div>
        </div>



        <div class="container ">
            <div class="row ">
                <div class="col-lg-3 col-xs-6 ">
                    <div class="center-bottom wow fadeInUp" data-wow-delay="500ms">
                        <div class="thunm">
                            <img src="./img/service_01.png " alt=" ">
                        </div>
                        <p>Web design</p>
                        <div class="content">
                            <p class="info">
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="center-bottom wow fadeInUp" data-wow-delay="700ms">
                        <div class="thunm">
                            <img src="./img/service_02.png " alt=" ">
                        </div>
                        <p>Mobile apps</p>
                        <div class="content">
                            <p class="info">
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="center-bottom wow fadeInUp" data-wow-delay="800ms">
                        <div class="thunm">
                            <img src="./img/service_03.png " alt=" ">
                        </div>
                        <p>PHOTOGRAPHY</p>
                        <div class="content">
                            <p class="info">
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="center-bottom wow fadeInUp" data-wow-delay="900ms">
                        <div class="thunm">
                            <img src="./img/service_04.png " alt=" ">
                        </div>
                        <p>marketing</p>
                        <div class="content">
                            <p class="info">
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- clients 客户 -->
        <div class="clients">
            <div class="container">
                <!-- 标题 -->
                <div class="subject wow fadeInUp" data-wow-delay="500ms">
                    <h3 class="title">
                        some of
                        <span>our clients</span>
                    </h3>
                </div>

                <!-- 客户 -->
                <div class="clientlist">
                    <div class="list">
                        <div class="item wow fadeInUp" data-wow-delay="500ms">
                            <div class="thumb">
                                <img src="./img/clients_01.png" />
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="700ms">
                            <div class="thumb">
                                <img src="./img/clients_02.png" />
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="800ms">
                            <div class="thumb">
                                <img src="./img/clients_03.png" />
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="900ms">
                            <div class="thumb">
                                <img src="./img/clients_04.png" />
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="900ms">
                            <div class="thumb">
                                <img src="./img/clients_05.png" />
                            </div>
                        </div>
                    </div>
            
                   
                </div>
                <div class="meue_bottom ">
                    <li></li>
                    <li></li>
                    <li></li>
                </div>
            </div>
        </div>

        <!-- work -->
        <div class="work" id="work">
            <div class="container">
                <div class="subject wow fadeInUp" data-wow-delay="200ms">
                    <h3 class="title">
                        take a look at
                        <span>our work</span>
                    </h3>
                </div>

                <p class="info wow fadeInUp" data-wow-delay="200ms">
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
                    Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </p>

                <div class="typelist">
                    <div class="top">
                        <div class="left wow fadeInUp" data-wow-delay="400ms">
                            <h4 class="title">Filter by type</h4>
                        </div>

                        <div class="right wow fadeInUp" data-wow-delay="400ms">
                            <a>All</a>
                            <a >Web design</a>
                            <a >Mobile design</a>
                            <a >Photograpy</a>
                        </div>
                    </div>

                    <div class="list">
                        <div class="item wow fadeInUp" data-wow-delay="200ms">
                            <img src="./img/shai.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="300ms">
                            <img src="./img/shai.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="400ms">
                            <img src="./img/shai.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="500ms">
                            <img src="./img/shai.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="600ms">
                            <img src="./img/ghost_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="700ms">
                            <img src="./img/ghost_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="800ms">
                            <img src="./img/ghost_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="900ms">
                            <img src="./img/ghost_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="1000ms">
                            <img src="./img/pingmu_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="1100ms">
                            <img src="./img/pingmu_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="1200ms">
                            <img src="./img/pingmu_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                        <div class="item wow fadeInUp" data-wow-delay="1300ms">
                            <img src="./img/pingmu_03.png" />
                            <div class="back">
                                <h4>Trend and fashion</h4>
                                <span>Website design</span>
                                <div class="add">
                                    <a href="javascript:void(0)">+</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- test -->
        <div class="test" id="test">
            <div class="container">
                <div class="subject wow fadeInUp" data-wow-delay="500ms">
                    <h3 class="title">
                        our clients’
                        <span>testimonials</span>
                    </h3>
                </div>

                <div class="infolist">
                    <input type="radio" name="info" id="info1" checked />
                    <div class="info">
                        <p class="content">
                            This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                        </p>

                        <div class="name">
                            <span>Dean Martin, </span>CEO Acme Inc.
                        </div>
                    </div>

                    <div class="morebox">
                        <div class="more wow fadeInUp" data-wow-delay="600ms">
                            <label for="info1"></label>
                            <label for="info2"></label>
                            <label for="info3"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- contact -->
        <div class="contact" id="contact">
            <div class="container">
                <div class="subject wow fadeInUp" data-wow-delay="500ms">
                    <h3 class="title">
                        feel free to
                        <span>contact us</span>
                    </h3>
                </div>

                <p class="info wow fadeInUp" data-wow-delay="600ms">
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
                </p>

                <div class="register">
                    <form name="register" method="post">
                        <div class="one">
                            <div class="left wow fadeInUp" data-wow-delay="400ms">
                                <div class="title">
                                    Name<sup>*</sup>
                                </div>
                                <div class="input">
                                    <input />
                                </div>
                            </div>
                            <div class="right wow fadeInUp" data-wow-delay="500ms">
                                <div class="title">
                                    Email Address<sup>*</sup>
                                </div>
                                <div class="input">
                                    <input/>
                                </div>
                            </div>
                        </div>

                        <div class="two">
                            <div class="title wow fadeInUp" data-wow-delay="600ms">
                                Message<sup>*</sup>
                            </div>
                            <div class="input wow fadeInUp" data-wow-delay="700ms">
                                <textarea name="message"></textarea>
                            </div>
                        </div>

                        <div class="three wow fadeInUp" data-wow-delay="900ms">
                            <button class="send">SEND</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- footer -->
        <div class="footer" id="footer">
            <div class="container">
                <div class="footer-box">
                    <div class="copyright wow fadeInUp" data-wow-delay="300ms">
                        ALL RIGHTS RESERVED. COPYRIGHT ©
                        <span>2014 SPIRIT8</span>
                    </div>
                    <div class="linklist">
                        <a class="wow fadeInUp" data-wow-delay="100ms">
                            <img src="./img/footer1.png" />
                        </a>
                        <a class="wow fadeInUp" data-wow-delay="200ms">
                            <img src="./img/footer2.png" />
                        </a>
                        <a class="wow fadeInUp" data-wow-delay="300ms">
                            <img src="./img/footer3.png" />
                        </a>
                        <a class="wow fadeInUp" data-wow-delay="400ms">
                            <img src="./img/footer4.png" />
                        </a>
                        <a class="wow fadeInUp" data-wow-delay="500ms">
                            <img src="./img/footer5.png" />
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>




</body>
<script src="./js/less.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src=" ./bootstrap/js/bootstrap.min.js "></script>

<!-- 引用wow滚动 -->
<script src="./wow/js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
    };
</script>

</html>